<template>
    <el-form ref="formRef" :rules="rules" :model="formData" label-width="120px">
        <el-card shadow="never" class="!border-none">
            <div class="text-xl font-medium mb-[20px]">Luma 视频配置</div>
            <el-form-item label="功能开启" prop="luma.status">
                <div>
                    <el-switch
                        v-model="formData.luma.status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                    <div class="form-tips !text-[14px] flex items-center">
                        功能关闭后，用户将无法访问该功能
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="应用名称" prop="luma.name">
                <div>
                    <div class="flex">
                        <el-input
                            placeholder="请输入应用名称"
                            class="w-[400px]"
                            v-model="formData.luma.name"
                        />
                    </div>
                    <div class="form-tips !text-[14px]">
                        不填写前台则显示默认名称(Luma)
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="接口渠道" prop="luma.channel" required>
                <div>
                    <div class="flex">
                        <el-radio-group v-model="formData.luma.channel">
                            <el-radio value="openai-hk">OpenAI-HK</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="form-tips !text-[14px]">
                        开通地址：
                        <a
                            class="text-primary"
                            target="_blank"
                            href="https://www.openai-hk.com/open/index"
                        >
                            前往开通
                        </a>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="渠道模型" prop="luma.model" required>
                <el-radio-group v-model="formData.luma.model">
                    <el-radio value="ray-v2">ray-v2</el-radio>
                    <el-radio value="ray-v1">ray-v1</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="消耗积分" prop="luma.points" required>
                <div>
                    <el-input-number
                        v-model="formData.luma.points"
                        :min="0"
                    />
                    <div class="form-tips !text-[14px]">
                        填写0则表示不消耗积分
                    </div>
                </div>
            </el-form-item>
        </el-card>

        <el-card shadow="never" class="!border-none mt-4">
            <div class="text-xl font-medium mb-[20px]">智谱视频配置</div>
            <el-form-item label="功能开启" prop="zhipu.status">
                <div>
                    <el-switch
                        v-model="formData.zhipu.status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                    <div class="form-tips !text-[14px] flex items-center">
                        功能关闭后，用户将无法访问该功能
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="应用名称" prop="zhipu.name">
                <div>
                    <div class="flex">
                        <el-input
                            placeholder="请输入应用名称"
                            class="w-[400px]"
                            v-model="formData.zhipu.name"
                        />
                    </div>
                    <div class="form-tips !text-[14px]">
                        不填写前台则显示默认名称(CogVideoX)
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="接口渠道" prop="zhipu.channel" required>
                <div>
                    <div class="flex">
                        <el-radio-group v-model="formData.zhipu.channel">
                            <el-radio value="zhipu">智谱清言</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="form-tips !text-[14px]">
                        开通地址：
                        <a
                            class="text-primary"
                            target="_blank"
                            href="https://open.bigmodel.cn/dev/api/videomodel/cogvideox"
                        >
                            前往开通
                        </a>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="渠道模型" prop="zhipu.model" required>
                <el-radio-group v-model="formData.zhipu.model">
                    <el-radio value="cogvideox-2">cogvideox-2</el-radio>
                    <el-radio value="cogvideox-flash">cogvideox-flash</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="消耗积分" prop="zhipu.points" required>
                <div>
                    <el-input-number
                        v-model="formData.zhipu.points"
                        :min="0"
                    />
                    <div class="form-tips !text-[14px]">
                        填写0则表示不消耗积分
                    </div>
                </div>
            </el-form-item>
        </el-card>

        <!-- 保存按钮 -->
        <el-card shadow="never" class="!border-none mt-4">
            <el-button
                v-perms="['video:setting:save']"
                :loading="loading"
                type="primary"
                @click="handleSubmit"
            >保存配置</el-button>
        </el-card>
    </el-form>
</template>

<script setup lang="ts">
import feedback from '@/utils/feedback'
import videoSettingApi from '@/api/apply/video/setting'

const loading = ref(false)
const formRef = ref()
const formData = reactive({
    luma: {
        status: 0,
        points: 0,
        channel: '',
        model: '',
        name: ''
    },
    zhipu: {
        status: 0,
        points: 0,
        channel: '',
        model: '',
        name: ''
    }
})

// 表单验证
const rules = {
    // luma
    'luma.points': [
        { required: true, message: '请填写消耗积分', trigger: ['blur'] },
    ],
    'luma.channel': [
        { required: true, message: '选择接口渠道', trigger: ['blur'] },
    ],
    'luma.model': [
        { required: true, message: '选择渠道模型', trigger: ['blur'] },
    ],
    'luma.name': [
        { max: 50, message: '应用名称不能超出50个字符', trigger: ['blur'] },
    ],
    // zhipu
    'zhipu.points': [
        { required: true, message: '请填写消耗积分', trigger: ['blur'] },
    ],
    'zhipu.channel': [
        { required: true, message: '选择接口渠道', trigger: ['blur'] },
    ],
    'zhipu.model': [
        { required: true, message: '选择渠道模型', trigger: ['blur'] },
    ],
    'zhipu.name': [
        { max: 50, message: '应用名称不能超出50个字符', trigger: ['blur'] },
    ]
}


/**
 * 查询配置参数
 */
const queryConfigs = async (): Promise<void> => {
    const data = await videoSettingApi.detail()
    Object.assign(formData, data)
}

/**
 * 提交修改参数
 */
const handleSubmit = async (): Promise<void> => {
    await formRef.value?.validate()

    loading.value = true
    await videoSettingApi.save(formData)
        .finally(() => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        })

    await queryConfigs()
    feedback.msgSuccess('保存成功')
}

onMounted(async () => {
    await queryConfigs()
})
</script>
